<template>
  <div>
    <div class="item-line">
      <div>输入变量</div>
      <div>
        <ac-select
          v-model="data.sourceParamId"
          :options="sourceParamOptions"
        />
      </div>
    </div>
    <div class="item-line">
      <div>模型名称</div>
      <div class="inline">
        <ac-remote-select
          v-model="data.modelId"
          data-url="/system/aiModel/queryPage"
          :option="{id: data.modelId, name: data.modelName}"
          :query="{supplierModelType: '01'}"
          @change="modelChange"
        />
        <llm-attr v-model="data.modelParamJson" />
      </div>
    </div>
    <div class="item-line">
      <div>分类</div>
      <div
        class="classifier-item"
        v-for="(classifier, index) in data.classifierList"
        :key="index"
      >
        <div class="classifier-header">
          <div>分类 {{index + 1}}</div>
          <ac-icon
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            @click.stop="deleteClassifier(index)"
          />
        </div>
        <el-input
          type="textarea"
          v-model="classifier.content"
          :rows="2"
          placeholder="分类主题内容"
        />
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="addClassifier">
        <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加分类
      </div>
    </div>
    <div style="margin-top: 10px">
      <div>
        <div>ELSE</div>
        <div style="color: #bbb">当以上分类都不满足时，执行此分支，分支索引为：-1</div>
      </div>
    </div>
    <div class="item-line">
      <div>输出变量</div>
      <div
        v-for="(item, index) in data.outputList"
        :key="index"
        style="color: #666"
      >
        <div>{{'<' + item.type + '>'}} {{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import tool from "@/utils/tool";
import LlmAttr from "@/admin/ai/components/llm-attr.vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        classifierList: [],
        outputList: []
      }
    }
  },
  sourceParamOptions: {
    type: Object,
    default: () => {}
  }
});

const data = ref(props.data);

const addClassifier = () => {
  data.value.classifierList.push({id: tool.uuid(), content: ''});
};

const deleteClassifier = (index) => {
  data.value.classifierList.splice(index, 1);
};

const modelChange = (res) => {
  data.value.modelName = res.name || '';
};
</script>

<style scoped>
.item-line {
  margin-top: 15px;
  >div:first-child {
    margin-bottom: 5px;
  }
}
.button-box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  .button {
    color: #67C23A;
    cursor: pointer;
    display: flex;
    align-items: center;
    .ac-icon {
      margin-right: 8px;
    }
  }
}
.inline {
  display: flex;
}
.classifier-item {
  margin-top: 10px;
  position: relative;
  .classifier-header {
    box-sizing: border-box;
    padding: 5px;
    position: absolute;
    width: 100%;
    display: flex;
    color: #bbbbbb;
    div:first-child {
      flex-grow: 1;
    }
    .ac-icon {
      z-index: 99;
      cursor: pointer;
    }
  }
  :deep(textarea) {
    padding-top: 28px;
    background-color: transparent;
  }
}
</style>